import React, { Component } from 'react';
import { Form, Input, Select, Button, Card } from 'antd';
import Editable from './components/Editable';

@Form.create()
class EditableDemo extends Component {
  render() {
    const { getFieldDecorator, validateFields } = this.props.form;
    return (
      <div>
        <Card>
          <Form
            onSubmit={e => {
              e.preventDefault();
              validateFields((err, val) => {
                if (err) {
                  return;
                }
                console.log(val);
              });
            }}
          >
            <Form.Item>{getFieldDecorator('name', {})(<Input></Input>)}</Form.Item>
            <Form.Item>
              {getFieldDecorator('gender', {})(
                <Select>
                  {['man', 'woman'].map(item => (
                    <Select.Option value={item} key={item}>
                      {item}
                    </Select.Option>
                  ))}
                </Select>,
              )}
            </Form.Item>
            <Form.Item>
              {getFieldDecorator('text', {
                initialValue: [
                  {
                    id: 0,
                    fieldName: 'temMax',
                    tooltipUnit: '℃',
                    color: 'red',
                    zhName: '最高温',
                    threshold: '20',
                  },
                  {
                    id: 1,
                    fieldName: 'temMin',
                    tooltipUnit: '℃',
                    color: 'blut',
                    zhName: '最低温',
                    threshold: '',
                  },
                ],
              })(
                <Editable
                  columns={[
                    {
                      title: '字段名',
                      key: 'fieldName',
                      options: {},
                      widget: (
                        <Select
                          placeholder="请选择字段"
                          style={{
                            width: 300,
                          }}
                        >
                          {['temMax', 'texMin'].map(item => (
                            <Select.Option value={item} key={item}>
                              {item}
                            </Select.Option>
                          ))}
                        </Select>
                      ),
                    },
                    {
                      title: '单位（tooltip）',
                      key: 'tooltipUnit',
                      options: {},
                      widget: <Input placeholder="请输入单位（tooltip）" />,
                    },
                    {
                      title: '颜色',
                      key: 'color',
                      options: {},
                      widget: <Input placeholder="请输入颜色" />,
                    },
                    {
                      title: '中文名',
                      key: 'zhName',
                      options: {},
                      widget: <Input placeholder="请输入中文名" />,
                    },
                    {
                      title: '阈值',
                      key: 'threshold',
                      widget: <Input placeholder="请输入阈值" />,
                    },
                  ]}
                ></Editable>,
              )}
            </Form.Item>
            <Form.Item>
              <Button htmlType="submit">Submit</Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    );
  }
}

export default EditableDemo;
